import React, { useState, useEffect } from 'react';

import { Row, Col } from 'antd';
import { Input, Modal } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history, Service } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import Xinzheng from '../studentInfo/xinzheng';
import request from '../../../http';

//李鸿 管理员 学生信息管理

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    yx: `软件学院 ${i}`,
    zy: `计算机科学与技术 ${i}`,
    nj: `2007 ${i}`,
    bj: `一班 ${i}`,
    bzr: `张XX ${i}`,
    sfyjy: `是 ${i}`,
    xyzs: `100 ${i}`,
    cz: `学员明细 ${i}`,
  });
}

//表格数据
function info() {
  Modal.info({
    title: '查看学生',
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
    onOk() {},
  });
}

const columns2 = [
  {
    title: '院系',
    width: 100,
    dataIndex: 'yx',
    key: '1',
    fixed: 'left',
  },
  {
    title: '专业',
    width: 100,
    dataIndex: 'zy',
    key: '2',
    fixed: 'left',
  },
  { title: '年级', dataIndex: 'nj', key: '3' },
  { title: '班级', dataIndex: 'bj', key: '4' },
  { title: '班主任', dataIndex: 'bzr', key: '5' },
  { title: '是否已结业', dataIndex: 'sfyjy', key: '6' },
  { title: '学员总数', dataIndex: 'xyzs', key: '7' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 250,
    render: (text, record) => (
      <Space size="middle">
        <a onClick={() => history.push('/admin/studentInfo/xygl')}>学员明细</a>
        {/*<Button type="link" onClick={info}>
          学员明细
    </Button>*/}
        <Button type="link" onClick={info}>
          编辑
        </Button>
      </Space>
    ),
  },
];

const studentInfo = () => {
  //获取输入的值
  const [gCollege1, setgCollege1] = useState(0);
  const [gMajor1, setgMajor1] = useState(0);
  const [gGrade1, setgGrade1] = useState(0);
  const [gClass1, setgClass1] = useState(0);
  const [gHeadMaster1, setgHeadMaster1] = useState(0);
  const [gIsGraduation1, setgIsGraduation1] = useState(0);
  //公共接口
  const [College1, setCollege1] = useState([{}]);
  const [Major1, setMajor1] = useState([{}]);
  const [Grade1, setGrade1] = useState([{}]);
  const [Class1, setClass1] = useState([{}]);
  const [HeadMaster1, setHeadMaster1] = useState([{}]);
  const [IsGraduation1, setIsGraduation1] = useState([{}]);

  //新增按钮弹窗
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [modalText, setModalText] = React.useState('Content of the modal');
  const [HeadMaster, setHeadMaster] = useState([{}]);
  const [Major, setMajor] = useState([{}]);

  const showModal = () => {
    setVisible(true);
    console.log();
  };

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);

    //业务逻辑
    console.log('我执行了');

    console.log(
      gCollege1,
      gMajor1,
      gGrade1,
      gClass1,
      gHeadMaster1,
      gIsGraduation1,
    );
    request
      .post('/studentManage/admin/AddClassInfo', {
        className: gClass1,
        dKey: gCollege1,
        gKey: gMajor1,
        gradeKey: gGrade1,
        headerTeacherAccount: gHeadMaster1,
        state: gIsGraduation1,
        total: '0',
      })
      .then((res) => {
        // console.log('请求成功了', res.message);
        if (res.message == '成功') {
          alert('新增成功！');
        } else {
          alert('新增失败！');
        }
      });
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  //初始化页码
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  const loadDataSource = (parms: any) => {
    request.get('/studentManage/admin/QueryAllClassInfo').then(
      (result: any) => {
        //console.log(result);
        // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
        // config: {url: "请求的地址"}，这是一个配置文件
        // headers: 请求头信息
        // data: (100) 返回响应的数据
        // request: ajax相关的请求信息
        // status: 200；响应状态
        // statusText: "OK"
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          //console.log(result.data);

          const data4 = result.data.map((item: any) => ({
            key: `p_${item.id}`,
            yx: item.faculty,
            zy: item.profession,
            nj: item.grade,
            bj: item.name,
            bzr: item.userName,
            sfyjy: item.graduatedName,
            xyzs: item.totalMember,
          }));

          //获取分页请求的数据
          /* const newPageObject = {
              ...pagination,
              current: parms.page,
              pageSize: parms.number,
              total: result.data.paginationData.sum,
            };

            //放分页的数据
            setPagination(newPageObject);*/

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  //下拉获取的值
  //const [datas, setdatas] = useState(initialState)

  //周期搜索
  React.useEffect(() => {
    const parms = {
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };

    //抽成一个公共方法了
    loadDataSource(parms);

    //院系请求
    request.get('/studentManage/admin/AdminGetAllGrades').then((res) => {
      console.log('院系请求成功了', res.data);
      setCollege(res.data);
      //console.log(res.data);
    });

    //班级请求
    request.get('/studentManage/admin/AdminGetAllClass').then((res) => {
      console.log('班级请求成功了', res.data);
      setName(res.data);
    });

    //专业请求
    request.get('/studentManage/admin/AdminGetAllMajor').then((res) => {
      console.log('专业请求成功了', res.data);
      setProfession(res.data);
    });

    //年级请求
    request.get('/studentManage/admin/AdminGetAllGrade').then((res) => {
      console.log('年级请求成功了', res.data);
      setGrade(res.data);
    });

    //是否已结业请求
    request.get('/studentManage/admin/AdminGetAllGraduated').then((res) => {
      console.log('是否已结业请求成功了', res.data);
      setIsGraduated(res.data);
    });

    //院系请求
    request.post('/common/a_t_s/queryAllGrades').then((res) => {
      // console.log("院系请求成功了",res.data)
      setCollege1(res.data);
    });

    //专业请求
    request.post('/common/a_t_s/queryAllMajor').then((res) => {
      // console.log("院系请求成功了",res.data)
      setMajor1(res.data);
    });

    //年级请求
    request.post('/common/a_t_s/enumGrade').then((res) => {
      // console.log("年级请求成功了",res.data)
      setGrade1(res.data);
    });

    //班级请求
    request.post('/common/a_t/enumClass').then((res) => {
      console.log('班级请求成功了', res.data);
      setClass1(res.data);
    });

    //实训老师请求
    request.post('/common/admin/queryTeacherNames').then((res) => {
      // console.log("实训老师请求成功了",res.data)
      setHeadMaster1(res.data);
    });

    //是否已结业请求
    request.get('/studentManage/admin/AdminGetAllGraduated').then((res) => {
      // console.log('是否已结业请求成功了', res.data);
      setIsGraduation1(res.data);
    });
  }, []);

  const [Data2, setData2] = React.useState();

  //新增班级
  const xinzhengbanji = (
    <div>
      <Form>
        <div>
          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="院系："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  setgCollege1(parseInt(index.key));
                }}
                allowClear
              >
                {College1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="专业："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  setgMajor1(parseInt(index.key));
                }}
                allowClear
              >
                {Major1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="年级："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  //  console.log(parseInt(index.key))
                  setgGrade1(parseInt(index.key));
                }}
                allowClear
              >
                {Grade1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="班级："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  // console.log(index.key)

                  setgClass1(index.key);
                }}
                allowClear
              >
                {Class1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="班主任："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  setgHeadMaster1(parseInt(index.key));
                }}
                allowClear
              >
                {HeadMaster1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item
              label="是否已结业："
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  setgIsGraduation1(parseInt(index.key));
                }}
                allowClear
              >
                {IsGraduation1.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.graduatedName}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'left', width: '1000px' }}></div>
        </div>
      </Form>
    </div>
  );

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  //获取输入的值
  //绑的onchange事件
  const [gCollege, setgCollege] = useState(0); //院系
  const [gName, setgName] = useState(0); //班级
  const [gProfession, setgProfession] = useState(0); //专业
  const [gGrade, setgGrade] = useState(0); //年级
  const [gIsGraduated, setgIsGraduated] = useState(0); //年级
  const [gUserName, setgUserName] = useState(0); //班主任

  //接收下拉框请求
  const [College, setCollege] = useState([{}]);
  const [Name, setName] = useState([{}]);
  const [Profession, setProfession] = useState([{}]);
  const [Grade, setGrade] = useState([{}]);
  const [IsGraduated, setIsGraduated] = useState([{}]);
  const [UserName, setUserName] = useState([{}]);

  //获取班主任输入框的值
  const getUserName = (e: any) => {
    const UserName = e.target.userName;
    console.log(UserName);
  };

  //获取表单的数据
  const onSubmit = (value: any) => {
    //获取学生
    console.log(gCollege, gName, gProfession, gGrade, gIsGraduated, UserName);
    console.log(111, value);
    const parms = {
      ...value,
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    loadDataSource(parms);
  };

  return (
    <div>
      {/*表单*/}
      <div>
        <Form
          onFinish={onSubmit}
          {...formItemLayout}
          initialValues={{
            remember: true,
          }}
        >
          <div style={{ marginLeft: '8px', float: 'left', width: '1200px' }}>
            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="faculty" label="院系：">
                <Select
                  placeholder="请选择"
                  //onChange={onGenderChange}
                  allowClear
                >
                  {College.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.gradesName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item name="name" label="班级">
                <Select placeholder="请选择" allowClear>
                  {Name.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.className}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="profession" label="专业：">
                <Select placeholder="请选择" allowClear>
                  {Profession.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.majorName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item name="userName" label="班主任：">
                <Input placeholder="请录入"></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="grade" label="年级：">
                <Select placeholder="请选择" allowClear>
                  {Grade.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.gradeName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item name="isGraduated" label="是否已结业：">
                <Select placeholder="请选择" allowClear>
                  {IsGraduated.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.graduatedName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '10px' }}
                >
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '30px' }}
                >
                  <Button type="default" htmlType="submit">
                    重置
                  </Button>
                </div>
              </Form.Item>
            </div>

            <div style={{ clear: 'left', width: '50px' }}>
              <div style={{ float: 'left', width: '50px', marginLeft: '0px' }}>
                <Form.Item {...tailLayout}>
                  <Button type="primary" onClick={showModal}>
                    +新增班级
                  </Button>
                  <Modal
                    title="班级信息维护"
                    visible={visible}
                    onOk={handleOk}
                    width={1000}
                    okText={'确认'}
                    cancelText={'取消'}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                  >
                    <p>{xinzhengbanji}</p>
                  </Modal>
                </Form.Item>
              </div>
            </div>
          </div>
        </Form>
      </div>

      <div
        style={{
          marginLeft: '8px',
          float: 'left',
          height: '50px',
          width: '99%',
          backgroundColor: '#ebf6f7 ',
        }}
      >
        <div style={{ marginTop: '8px' }}>
          <Button type="text">已选择XX项</Button>
          <Button type="link">清空</Button>
        </div>
      </div>
      {/* 表格 */}
      <div style={{ marginLeft: '8px' }}>
        <Table
          columns={columns2}
          dataSource={Data2}
          /*分页组件*/
          pagination={pagination}
          /*onChange={pageOnChange}*/
          scroll={{ x: 1300 }}
        />
      </div>
    </div>
  );
};

export default studentInfo;
